<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>选择人员</title>
	<link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css" />
	<link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css" />
	<link rel="stylesheet" type="text/css" href="../css/main-page.css" />
	<script type="text/javascript" src="../easyui/jquery-1.8.0.min.js"></script>
	<script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js"></script>
	<script type="text/javascript" src="../js/win.js"></script>
	<script type="text/javascript">
		function initDragItem(){
			$('.drag-item').draggable({
				revert:true,
				deltaX:10,
				deltaY:10
			});
		}
		
		function initDropItem(){
			$("div[name='dropItem']").panel();
			$("div[name='dropItem']").droppable({
		    	onDrop:function(e,source){
		    		var id = $(source).attr("id");
		    		if(canDrop(id, this)){
		    			$(this).append(source);
		    		}
		    	}
		    });  
		}
		
		function canDrop(id, div){
			var result = true;
			$(div).children().each(function(){
				if(this.id == id){
					result = false;
				}
			});
			return result;
		}
		
		function initGroupTypeCombo(){
			$("#groupType").combobox({
				onSelect : function(item){
					if(item.value == 1){
						initUserGroupType();
					} else if(item.value == 2){
						initWorshipType();
					}
				}
			});
		}
		
		function initUserGroupType(){
			$("#dragArea").panel('setTitle',"未分组人员");
			initDragUser("../user/findNoGroupUser.do");
			initDropGroup(1);
		}
		
		
		function initWorshipType(){
			$("#dragArea").panel('setTitle',"所有人员");
			initDragUser("../user/findUsersIn.do");
			initDropGroup(2);
		}
		
		function initDragUser(url){
			$("#dragArea").html("");
			$.ajax({
			   type: "POST",
			   url: url,
			   dataType: "json",
			   success: function(users){
				   var dragContent = "";
			   		for(var i = 0; i < users.length; i++){
			   			dragContent += "<div class='drag-item' id='"+users[i].id +"'>" + users[i].name +"</div>";
			   		}
			   		$("#dragArea").append(dragContent);
			   		initDragItem();
			   }
			});
		}
		
		function initDropGroup(type){
			$("#dropArea").html("");
			$.ajax({
			   type: "POST",
			   url: "../group/findByType.do?type="+type,
			   dataType: "json",
			   success: function(groups){
				   var dropContent = "";
				   var users = null;
			   		for(var i = 0; i < groups.length; i++){
			   			dropContent += "<div style='width: 230px;height: 145px;float: left;padding:0 5px 5px 0;' >";
			   			dropContent += "<div class='easyui-panel' name='dropItem' data-options='fit:true'  title='"
			   							+ groups[i].name + "' id='" + groups[i].id+"'>";
			   			dropContent += "<div class='group-leader' id='"+groups[i].leaderId+"'>" 
			   							+ groups[i].leaderName + "</div>";
			   			users = groups[i].users;
			   			for(var j = 0; j < users.length; j++){
			   				dropContent += "<div class='drag-item' id='"+users[j].id +"'>" 
			   								+ users[j].name +"</div>";
			   			}
			   			dropContent += "</div></div>";
			   		}
			   		$("#dropArea").append(dropContent);
			   		initDropItem();
			   }
			});
		}
		

		$(function(){
			initGroupTypeCombo();
			initUserGroupType();
			$("#dragArea").droppable({
		    	onDrop:function(e,source){
	    			$(this).append(source);
		    	}
		    });
		});
		
		/*
		 * groupid:userid,userId;
		 *
		 */
		function saveUserGroup(){
			 var content = "";
			 var _this;
			 $("div[name='dropItem']").each(function(){
				 _this = this;
				 content += this.id + ":";
				 $(_this).children().each(function(){
					 if( $(this).attr("class") != "group-leader"){
							content += this.id +",";					
					 }
				 });
				 content += ";";
			 });
			 $.ajax({
				   type: "POST",
				   url: "../group/saveUserGroup.do?ids="+content,
				   dataType: "text",
				   success: function(result){
					   if (result == "success") {
						   $.messager.alert("提示", alertPrefix + "保存成功!", 'info');
				        } else {
				        	$.messager.alert("提示", alertPrefix + result, 'info');
				        }
				   }
				});
		}
	</script>
	<style type="text/css">
		.drag-item{
			border: 1px solid #CCCCCC;
			margin: 2px;
			text-align:center;
			background-color: #F8F8F8;
			width: 45px;
			height: 20px;
			line-height: 20px;
			float: left;
		}
		.group-leader{
			border: 1px solid #CCCCCC;
			margin: 2px;
			text-align:center;
			background-color: #F8F8F8;
			width: 45px;
			height: 20px;
			line-height: 20px;
			float: left;
			color: blue;
		}
	</style>
</head>
<body class="easyui-layout">
	<div data-options="region:'center',border:false" style="padding: 5px" id="dropArea">
	</div>
	<div data-options="region:'west',border:false" style="width: 200px;padding: 5px">
		<div class="easyui-panel" data-options="fit:true" title="未分组人员" id="dragArea">
		</div>
	</div>
	<div data-options="region:'north'" class='fm-btn' style="text-align: left;">
		<select class="easyui-combobox" id="groupType"
			data-options="panelHeight: 'auto'" style="width: 150px" onchange="">
			<option value="1">人员组</option>
			<option value="2">侍奉组</option>
		</select>
		<font style="margin: 0 10px;color: blue;">请将人员拖到小组里，点击保存完成分组</font>
		<a href="#" class="easyui-linkbutton" iconCls="icon-save" onclick="saveUserGroup()">保存</a>
	</div>
</body>
</html>